<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .todo-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            padding: 30px;
        }
        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            transition: background-color 0.3s;
        }
        .todo-item:hover {
            background-color: #f8f9fa;
        }
        .todo-item.completed .todo-text {
            text-decoration: line-through;
            color: #6c757d;
        }
        .todo-text {
            flex: 1;
            margin-left: 10px;
            cursor: pointer;
        }
        .todo-text.editing {
            background-color: #fff3cd;
            padding: 5px;
            border-radius: 5px;
        }
        .delete-btn {
            color: #dc3545;
            cursor: pointer;
            margin-left: 10px;
        }
        .delete-btn:hover {
            color: #c82333;
        }
        .stats {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="todo-container">
            <h1 class="text-center mb-4">
                <i class="fas fa-tasks"></i> 待办事项管理
            </h1>
            
            <div class="input-group mb-3">
                <input type="text" id="todoInput" class="form-control" placeholder="添加新的待办事项..." 
                       onkeypress="if(event.key === 'Enter') addTodo()">
                <button class="btn btn-primary" onclick="addTodo()">
                    <i class="fas fa-plus"></i> 添加
                </button>
            </div>

            <div id="todoList" class="mb-3">
                <!-- 待办事项将在这里动态生成 -->
            </div>

            <div class="stats">
                <span>总计: <strong id="totalCount">0</strong> 项</span>
                <span class="ms-3">已完成: <strong id="completedCount">0</strong> 项</span>
                <span class="ms-3">待完成: <strong id="pendingCount">0</strong> 项</span>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
